export const add3DHoverCardComponent = (editor) => {
    const { Components } = editor;

    Components.addType('3d-hover-card', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'cards' ,'data-gjs-type':"3d-hover-card",},
                resizable: true, // 允许调整大小
                components: [
                    {
                        tagName: 'figure',
                        attributes: { class: 'card1' },
                        draggable: false, // 不可拖动
                        components: [
                            {
                                type: 'text',
                                attributes: { class: 'card_title' },
                                content: '3D 小卡片'
                            }
                        ]
                    }
                ],
                styles: `
                    .cards {
                        perspective: 500px;
                        width:300px;
                        height:350px;
                        display: flex;
    justify-content: center;
                    }

                    .card1 {
                        width: 90%;
                        height: 90%;
                        background: #16161d;
                        border: 2px solid #555555;
                        border-radius: 4px;
                        position: relative;
                        transform-style: preserve-3d;
                        will-change: transform;
                        transition: transform .5s;
                    }

                    .card1:hover {
                        transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
                    }

                    .card_title {
                        color: #fff;
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translateY(-50%);
                        transition: transform .5s;
                        font: 700 1.5rem monospace;
                        text-shadow: -1px -1px 0 #000,  
                            1px -1px 0 #000,
                            -1px 1px 0 #000,
                            1px 1px 0 #000;
                    }

                    .card1:hover .card_title {
                        transform: translateZ(50px);
                    }
                `
            }
        }
    });

    editor.BlockManager.add('3d-hover-card', {
        label: '3D 卡片',
        content: { type: '3d-hover-card' },
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#5f6368"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480h80q0 115 72.5 203T418-166l-58-58 56-56L598-98q-29 10-58.5 14T480-80Zm20-280v-240h120q17 0 28.5 11.5T660-560v160q0 17-11.5 28.5T620-360H500Zm-200 0v-60h100v-40h-60v-40h60v-40H300v-60h120q17 0 28.5 11.5T460-560v160q0 17-11.5 28.5T420-360H300Zm260-60h40v-120h-40v120Zm240-60q0-115-72.5-203T542-794l58 58-56 56-182-182q29-10 58.5-14t59.5-4q83 0 156 31.5T763-763q54 54 85.5 127T880-480h-80Z"/></svg>`,
        category: '卡片类',
    });
};
